<link href="/plugins/jquery-file-upload/css/jquery.fileupload.css" rel="stylesheet" type="text/css"/>
<link href="/plugins/jquery-file-upload/css/jquery.fileupload-ui.css" rel="stylesheet" type="text/css"/>

<!-- BEGIN PAGE HEADER-->
<h3 class="page-title">
    发布看大腿
    <small></small>
</h3>
<div class="page-bar">
    <ul class="page-breadcrumb">
        <li>
            <i class="fa fa-home"></i>
            <a href="index.html">Home</a>
            <i class="fa fa-angle-right"></i>
        </li>
        <li>
            <a href="#">发布管理</a>
            <i class="fa fa-angle-right"></i>
        </li>
        <li>
            <a href="#">发布看大腿</a>
        </li>
    </ul>
</div>
<!-- END PAGE HEADER-->
<!-- BEGIN PAGE CONTENT-->
<div class="row">
    <div class="col-md-12">
        <form id="fileupload" class="form-horizontal form-row-seperated" action="#" method="post" enctype="multipart/form-data">
            <div class="portlet">
                <div class="portlet-title">
                    <div class="caption">
                        <i class="fa fa-shopping-cart"></i>发布看大腿
                    </div>
                    <div class="actions btn-set">
                        <button type="button" id="back" class="btn default">
                            <i class="fa fa-angle-left"></i> 返回
                        </button>
                        <button class="btn" id="reset" type="reset">
                            <i class="fa fa-reply"></i> 重置
                        </button>
                        <!--button type="button" class="btn green" id="uploadFile">
                            <i class="fa fa-check"></i> 保存
                        </button-->
                        <!--<button class="btn green"><i class="fa fa-check-circle"></i> 保存 & 继续编辑</button>-->
                    </div>
                </div>
                <div class="portlet-body">
                    <div class="row fileupload-buttonbar">
                        <div class="col-lg-7">
                            <!-- The fileinput-button span is used to style the file input field as button -->
                <span class="btn btn-success fileinput-button">
                    <i class="glyphicon glyphicon-plus"></i>
                    <span>Add files...</span>
                    <input type="file" name="file" multiple>
                </span>
                            <button type="submit" class="btn btn-primary start">
                                <i class="glyphicon glyphicon-upload"></i>
                                <span>Start upload</span>
                            </button>
                            <button type="reset" class="btn btn-warning cancel">
                                <i class="glyphicon glyphicon-ban-circle"></i>
                                <span>Cancel upload</span>
                            </button>
                            <button type="button" class="btn btn-danger delete">
                                <i class="glyphicon glyphicon-trash"></i>
                                <span>Delete</span>
                            </button>
                            <input type="checkbox" class="toggle">
                            <!-- The global file processing state -->
                            <span class="fileupload-process"></span>
                        </div>
                        <!-- The global progress state -->
                        <div class="col-lg-5 fileupload-progress fade">
                            <!-- The global progress bar -->
                            <div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100">
                                <div class="progress-bar progress-bar-success" style="width:0%;"></div>
                            </div>
                            <!-- The extended global progress state -->
                            <div class="progress-extended">&nbsp;</div>
                        </div>
                    </div>
                    <!-- The table listing the files available for upload/download -->
                    <table role="presentation" class="table table-striped"><tbody class="files"></tbody></table>
                </div>
            </div>
        </form>
    </div>
</div>
<script id="template-upload" type="text/x-tmpl">
{% for (var i=0, file; file=o.files[i]; i++) { %}
    <tr class="template-upload fade">
        <td>
            <span class="preview"></span>
        </td>
        <td>
            <p class="name">{%=file.name%}</p>
            <strong class="error text-danger"></strong>
        </td>
        <td>
            <p class="size">Processing...</p>
            <div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
                <div class="progress-bar progress-bar-success" style="width:0%;"></div>
            </div>
        </td>
        <td>
            {% if (!i && !o.options.autoUpload) { %}
                <button class="btn btn-primary start" disabled>
                    <i class="glyphicon glyphicon-upload"></i>
                    <span>Start</span>
                </button>
                <button class="btn btn-warning cancel">
                    <i class="glyphicon glyphicon-ban-circle"></i>
                    <span>Cancel</span>
                </button>
            {% } %}
        </td>
    </tr>
{% } %}
</script>
<!-- The template to display files available for download -->

<!-- END PAGE CONTENT-->
<script type="text/javascript" charset="utf-8" src="/plugins/jquery-file-upload/js/vendor/tmpl.min.js"></script>
<script type="text/javascript" charset="utf-8" src="/plugins/jquery-file-upload/js/vendor/jquery.ui.widget.js"></script>
<script type="text/javascript" charset="utf-8" src="/plugins/jquery-file-upload/js/jquery.iframe-transport.js"></script>
<script type="text/javascript" charset="utf-8" src="/plugins/jquery-file-upload/js/jquery.fileupload.js"></script>
<script type="text/javascript" charset="utf-8" src="/plugins/jquery-file-upload/js/jquery.fileupload-process.js"></script>
<script type="text/javascript" charset="utf-8" src="/plugins/jquery-file-upload/js/jquery.fileupload-ui.js"></script>
<script type="text/javascript">
    $("#fileupload").fileupload({
        dataType: 'json',
        maxNumberOfFiles : 1,
        downloadTemplateId: null,
//        add: function (e, data) {
//            data.context = $("<b>一个文件准备就绪！</b>").appendTo(".inputinfo");
//            $('#uploadFile').click(function () {
//                data.submit();
//            })
//        },
        done: function (e, data) {
            if (data.result.status == true) {
                Metronic.alert({
                    type: 'success',
                    icon: '',
                    message: data.result.msg,
                    container: '',
                    place: 'prepend'
                });
            } else {
                Metronic.alert({
                    type: 'danger',
                    icon: 'warning',
                    message: data.result.msg,
                    container: '',//grid.getTableWrapper(),
                    place: 'prepend'
                });
            }
        }
    });
</script>